<!-- 搜索表单 -->
<template>
  <div class="searchContainer">
    <el-card
      class="box-card"
      shadow="never"
      body-style="padding: 22px 22px 0 22px;"
    >
      <el-form
        label-width="72px"
        ref="form"
        :model="form"
        @keyup.enter="search"
      >
        <el-row :gutter="8">
          <el-col :lg="6" :md="12" :sm="12" :xs="24">
            <el-form-item label="用户名">
              <el-input
                clearable
                v-model="form.userName"
                placeholder="请输入用户名"
              />
            </el-form-item>
          </el-col>

          <el-col :lg="6" :md="12" :sm="12" :xs="24">
            <el-form-item label="付款时间:" prop="dateRange">
              <el-date-picker
                v-model="form.paymentTimeDateRange"
                type="datetimerange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-ddTHH:mm:ss"
                class="ele-fluid"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12" :sm="12" :xs="24">
            <el-form-item label="创建时间:" prop="dateRange">
              <el-date-picker
                v-model="form.dateRange"
                type="datetimerange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-ddTHH:mm:ss"
                class="ele-fluid"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12" :sm="12" :xs="24">
            <el-form-item label-width="16px">
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="resetForm('form')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'SystemUser',
    components: {
      // RegionsSelect
    },
    data() {
      // 默认表单数据
      const defaultWhere = {
        //用户名
        userName: '',
        //  付款时间
        paymentTimeDateRange: [],
        //   创建时间
        dateRange: []
      };
      return {
        // 表单数据
        form: {
          ...defaultWhere
        },
        sumbitForm: {},
        currentIndex: '0'
      };
    },
    props: {
      typeList: Array,
      oemList: {
        type: Array,
        default: () => []
      },
      secondaryList: {
        type: Array,
        default: () => []
      },
      currentPlatform: {
        type: String,
        default: ''
      }
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    methods: {
      switchTimeTab(index) {
        this.currentIndex = index;
        if (this.currentIndex == 0) {
          this.$emit('search', { siteStatus: '' });
        } else {
          this.$emit('search', { siteStatus: index });
        }
      },
      /* 搜索 */
      async search() {
        for (const key in this.form) {
          if (key == 'dateRange') {
            let startTime = this.form[key]?.[0];
            let endTime = this.form[key]?.[1];
            this.sumbitForm['startTime'] =
              startTime == undefined ? '' : startTime;
            this.sumbitForm['endTime'] = endTime == undefined ? '' : endTime;
          } else if (key == 'paymentTimeDateRange') {
            let startTime = this.form[key]?.[0];
            let endTime = this.form[key]?.[1];
            this.sumbitForm['startPayTime'] =
              startTime == undefined ? '' : startTime;
            this.sumbitForm['endPayTime'] = endTime == undefined ? '' : endTime;
          } else if (key == 'orderAmount') {
            this.sumbitForm['startOrderAmount'] =
              this.form[key].startOrderAmount == undefined
                ? ''
                : this.form[key].startOrderAmount;
            this.sumbitForm['endOrderAmount'] =
              this.form[key].endOrderAmount == undefined
                ? ''
                : this.form[key].endOrderAmount;
          } else {
            this.sumbitForm[key] = this.form[key];
          }
        }

        this.$emit('search', this.sumbitForm);
      },
      /*  重置 */
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.currentIndex = '0';
        this.form = {};
        this.sumbitForm = {};
        this.$emit('search', this.sumbitForm);
      }
    }
  };
</script>
<style lang="less" scoped>
  .searchContainer {
    margin-bottom: 15px;
  }
  .selectTime {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .timeTab {
      display: flex;
      align-items: center;
      margin-right: 20px;
      margin-bottom: 10px;
      li {
        list-style-type: none;
        display: block;
        width: 85px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border: 1px solid #d9d9d9;
        border-radius: 10px;
      }
      .active {
        width: 85px;
        height: 36px;
        border-radius: 6px;
        background: #1890ff;
        color: #fff;
        text-align: center;

        line-height: 36px;
      }
    }
    .orderStatus {
      width: 68px;
      height: 34px;
      font-size: 14px;
      line-height: 34px;

      margin-left: 5px;
    }
    .filterDate {
      text-align: center;
      line-height: 34px;
      width: 90px;
      height: 34px;
      font-size: 14px;
      border-radius: 2px 0px 0px 2px;
      border: 1px solid #d9d9d9;
      border-right: none;
    }
    .ele-fluid {
      width: 300px !important;
    }
  }
</style>
